<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>起始页</p>
    <button>第一页</button>
    <button>第二页</button>
    <script>
        var pageEle = document.querySelector("p");
        var btnEle1 = document.querySelectorAll("button")[0];
        var btnEle2 = document.querySelectorAll("button")[1];
        btnEle1.onclick = function (){
            window.location.hash = "page1" ;
            renderDom();
        }
        btnEle2.onclick = function (){
            window.location.hash = "page2" ;
            renderDom();
        }
        function renderDom(){
            // console.log(window.location.hash);
            var hashStr = window.location.hash ; 
            console.log(hashStr);
            switch(hashStr){
                case "#page1" 
                    :pageEle.innerHTML = "<h1>我是第一页</h1>"
                break;
                case  "#page2"
                    :pageEle.innerHTML = "<h1>我是第二页</h1>"
                break;
                default
                    ://window.alert("输入错误");
                break;
            }
        }
    </script>
</body>
</html>